<template>
  <Card title="设备告警 - 故障上报">
    <div slot="extra">
      <a href="#" @click="more">更多 &rsaquo;&rsaquo;</a>
    </div>
    <Radio-group v-model="time" @on-change="changeType" type="button" size="small">
      <Radio v-for="item in typeList" :key="item.label" :label="item.label">{{item.name}}</Radio>
    </Radio-group>
    <div class="table-box">
      <Table v-show="noticeAction == 'DEVICE_ALARM'"   class="mt20" :columns="columns1" :data="data">

      <template slot-scope="{ row }" slot="handledStatus">
        <Tag color="#ed4014" v-if="row.handledStatus == '00'"> 未处理</Tag>
        <Tag color="#19be6b" v-else> 已处理</Tag>
      </template>

      </Table>

      <Table v-show="noticeAction == 'UPLODAD_FAULT'"   class="mt20" :columns="columns2" :data="data">

      <template slot-scope="{ row }" slot="handledStatus">
        <Tag color="#ed4014" v-if="row.handledStatus == '00'"> 未处理</Tag>
        <Tag color="#19be6b" v-else> 已处理</Tag>
      </template>

      </Table>
    </div>
  </Card>
</template>

<script>
import {alarmEvent} from '@/api/realtimeData';
import base from '@/mixins/base';
import timeType from "./timeType";
export default {
  mixins:[base],
  components:{timeType},
  name: "alarmEventInfo",
  mounted() {
    this.getData('DEVICE_ALARM');
  },
  data(){
    return {
      time:1,
      noticeAction: 'DEVICE_ALARM',
      typeList:[
        {name:'设备告警',label:1},
        {name:'故障上报',label:2}
      ],
      columns1:[
        {
          title: '发生时间',
          key: 'createdAt',
          width: 100
        },
        {
          title: '设备编码',
          key: 'deviceCode',
          tooltip:true,
          width: 140
          
        },
        {
          title: '告警设备',
          key: 'deviceName',
          tooltip:true,
        },
        {
          title: '设备位置',
          key: 'deviceAddress',
          tooltip:true,
        },
        {
          title: '告警内容',
          key: 'content',
          tooltip:true
        },
        {
          title: '处理状态',
          slot: "handledStatus",
        }
      ],
      columns2:[
        {
          title: '发生时间',
          key: 'createdAt',
          width: 100
        },
        {
          title: '上报人员',
          key: 'createdName',
          width: 140
          
        },
        {
          title: '故障类型',
          key: 'faultType',
          width: 140
        },
        {
          title: '内容描述',
          key: 'content',
          tooltip:true
        },
        {
          title: '处理状态',
          slot: "handledStatus",
        }
      ],
      data:[

      ],
    }
  },
  methods:{
    async more(){
      window.location = "/realtimeData/alarmFault";
      // this.$router.push('realtimeData-alarmFault')
    },
    changeType(data){
      if(data == 1) {
        this.noticeAction = 'DEVICE_ALARM';
      }else{
        this.noticeAction = 'UPLODAD_FAULT';
      }
      this.getData();
      
    },
    async getData(){
      let res =!this.orgIds?{}: await alarmEvent({pOrgId:this.orgIds,dateType:this.dateType,noticeAction:this.noticeAction});
      this.data=_.get(res,'data')||[]
    },
    formatData(arr=[]){
      let _arr=  arr.map(item=>{
        return {
          label:item.x,
          value:item.y
        }
      })
      return _arr;
    }
  },
}
</script>

<style scoped lang="less">
.table-box{
  height:220px;
  overflow: hidden;
}
</style>
